<template>
  <el-card shadow="never" class="aui-card--fill">
    <div class="mod-adx__reporttotal}">
      <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
     
          <!-- <el-form-item label="账户">
            <el-select v-model="dataForm.dspId" placeholder="请选择对应的账户" filterable clearable>
              <el-option v-for="item in dspIdList " :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue">
              </el-option>
            </el-select>
          </el-form-item> -->
               <el-form-item label="账户ID">
          <el-input v-model="dataForm.dspId" placeholder="ID" clearable></el-input>
          </el-form-item>

          <el-form-item label="账户名称">
          <el-input v-model="dataForm.name" placeholder="账户名称" clearable></el-input>
          </el-form-item>
                     <el-form-item label="所属产品" prop="productChannel">
           <el-select v-model="dataForm.productChannel" placeholder="选择运营人员" filterable clearable>
              <el-option v-for="item in productList " :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue">
              </el-option>
            </el-select>
      </el-form-item>
         <el-form-item label="所属媒体" prop="mediaChannel">
         <el-select v-model="dataForm.mediaChannel" placeholder="选择运营人员" filterable clearable>
              <el-option v-for="item in mediaList " :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue">
              </el-option>
            </el-select>
           </el-form-item>

       <el-form-item label="投放起始时间">
          <el-date-picker v-model="dataForm.stime" value-format="yyyy-MM-dd" type="date"
            placeholder="投放起始时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="投放结束时间">
          <el-date-picker v-model="dataForm.etime" value-format="yyyy-MM-dd" type="date"
            placeholder="投放结束时间">
          </el-date-picker>
        </el-form-item>


          <el-form-item label="运营负责人">
            <el-select v-model="dataForm.userName" placeholder="选择运营人员" filterable clearable>
              <el-option v-for="item in userNameList " :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="商务">
            <el-select v-model="dataForm.business" placeholder="选择运营人员" filterable clearable>
              <el-option v-for="item in businessList " :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue">
              </el-option>
            </el-select>
          </el-form-item>

        
        <el-form-item>
          <el-button @click="getDataList()">{{ $t('query') }}</el-button>
        </el-form-item>
      </el-form>
      <el-table v-loading="dataListLoading" :data="dataList" border @selection-change="dataListSelectionChangeHandle"  show-summary
        style="width: 100%;">
        <!-- <el-table-column type="selection" header-align="center" align="center" width="100"></el-table-column> -->
        <el-table-column prop="id" v-if="false" label="主键ID" header-align="center" align="center"></el-table-column>
        <el-table-column prop="date" width="100"  label="日期" sortable header-align="center" align="center"></el-table-column>
        <el-table-column :show-overflow-tooltip='true' v-if="false"   prop="dspId" label="广告主ID" header-align="center" align="center"></el-table-column>
        <el-table-column :show-overflow-tooltip='true'  prop="name" label="账户备注" header-align="center" align="center"></el-table-column>
        <el-table-column prop="impTotal"  v-if="false"  width="100" :formatter="caseTypeNumber" label="曝光数量"  header-align="center" align="center"></el-table-column>
        <el-table-column prop="cpcTotal"  width="100" :formatter="caseTypeNumber" label="点击数量" header-align="center" align="center"></el-table-column>
         <el-table-column prop="radis" width="150"   label="点击转化率" header-align="center" align="center">
          <template slot-scope="scope">
            {{ ratio(scope.row) }}
            </template>
        </el-table-column>
        <el-table-column prop="act" width="100" sortable :formatter="caseTypeNumber"   label="激活数" header-align="center" align="center"></el-table-column>
        <el-table-column prop="register" width="100" :formatter="caseTypeNumber" sortable   label="注册数" header-align="center" align="center"></el-table-column>
        <el-table-column prop="pay" width="100" :formatter="caseTypeNumber" sortable  label="付费数" header-align="center" align="center"></el-table-column>
        <el-table-column prop="retain" width="100" :formatter="caseTypeNumber" sortable  label="次留数" header-align="center" align="center"></el-table-column>
        <el-table-column prop="wakeup" width="100" :formatter="caseTypeNumber" sortable  label="唤醒数" header-align="center" align="center"></el-table-column>
        <el-table-column prop="keybehaviors" width="120" :formatter="caseTypeNumber" sortable  label="关键行为" header-align="center" align="center"></el-table-column>
        <el-table-column prop="userName" width="100"  label="所属运营" header-align="center" align="center"></el-table-column>
        <el-table-column prop="business" width="100"  label="所属商务" header-align="center" align="center"></el-table-column>
       <!-- <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="100">
          <template slot-scope="scope">
            <el-button  type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">录入消耗</el-button>
          </template>
        </el-table-column> -->
        <el-table
        
        border
        height="200"
        :summary-method="getSummaries"
        show-summary
        style="width: 100%; margin-top: 20px">
        <el-table-column
          prop="id"
          label="ID"
          width="180">
        </el-table-column>
        <el-table-column
          prop="name"
          label="姓名">
        </el-table-column>
        <el-table-column
          prop="amount1"
          label="数值 1（元）">
        </el-table-column>
        <el-table-column
          prop="amount2"
          label="数值 2（元）">
        </el-table-column>
        <el-table-column
          prop="amount3"
          label="数值 3（元）">
        </el-table-column>
      </el-table>

      </el-table>
      <el-pagination :current-page="page" :page-sizes="[10, 20, 50, 100]" :page-size="limit" :total="total"
        layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle"
        @current-change="pageCurrentChangeHandle">
      </el-pagination>
      <!-- 弹窗, 新增 / 修改 -->
      <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
    </div>
  </el-card>
</template>

<script>
import mixinViewModule from '@/mixins/view-module'
import AddOrUpdate from './reporttotal-add-or-update'
import { getDictDataList } from '@/utils'

export default {
  mixins: [mixinViewModule],
  data() {
    return {
      mixinViewModuleOptions: {
        getDataListURL: '/adx/reporttotal/total',
        getDataListIsPage: true,
        exportURL: '/adx/reporttotal/export',
        deleteURL: '/adx/reporttotal',
        deleteIsBatch: true
      },
      dspIdList: [],
      userNameList: [],
      businessList:[],
      isAgeVisible: false,
      mediaList:[],
      productList:[],
      dataForm: {
        id: '',
        stime: '',
        etime: '',
      }
    }
  },
  mounted() {
    this.getDspIdDict();
    this.getNameDict();
    this.getBusinessDict();
            this.getProductList();
    this.getMediaList();
  },
  components: {
    AddOrUpdate
  },
  computed: {

  },
  methods: {
    getDspIdDict() {
      this.dspIdList = getDictDataList("dspIdList")

    },
   getMediaList() {
      this.mediaList = getDictDataList("mediaList")
    },
       getProductList() {
      this.productList = getDictDataList("productList")
    },
    luuu(){
       alert("正在开发中.....")
    },
    caseTypeNumber(row, column, cellValue){
          // 检查单元格的值是否为0，如果是，则返回"/"
      if (cellValue === '0') {
        return '/';
      }
      // 否则返回原始的单元格值
      return cellValue;
    },
    getNameDict() {
      this.userNameList = getDictDataList("userNameList")

    },
    getBusinessDict() {
      this.businessList = getDictDataList("businessList")

    },
    ratio(data) {
        let numericResultTypeTotal =0;
        let act= Number(data.act);
        let register= Number(data.register);
        let pay= Number(data.pay);
        let wakeup= Number(data.wakeup);
      if(act!=0){
        console.log("act")
        numericResultTypeTotal=Number(act);
      }else if(register!=0){
         console.log("register")
        numericResultTypeTotal=Number(register);
        console.log(numericResultTypeTotal)
      }else if(pay!=0){
         console.log("pay")
        numericResultTypeTotal=pay;
      }else if(wakeup!=0){
         console.log("wakeup")
        numericResultTypeTotal=wakeup;
      }else{
          console.log("empty")
        numericResultTypeTotal=0;
      }

      
     
      const numericClickTotal = Number(data.cpcTotal);

      if (numericClickTotal === 0) {
        return 0;
      }
      const result = (numericResultTypeTotal / numericClickTotal).toFixed(4);
      return (result * 100).toFixed(2) + '%';
    },
    getSummaries(param) {
        const { columns, data } = param;
        const sums = [];
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '总价';
            return;
          }
          const values = data.map(item => Number(item[column.property]));
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);
            sums[index] += ' 元';
          } else {
            sums[index] = 'N/A';
          }
        });

        return sums;
      } 
  }
}
</script>
